<template>
  <div class="pcbox bg_style border_style  " id="printMe" ref="print">
    <YsSpin fix v-if="dialog"></YsSpin>
    <one-template preview :templateBean="templateBean" :reportDataBean="reportDataBean"></one-template>
    <preview-tow-table :templateBean="templateBean" :reportDataBean="reportDataBean"></preview-tow-table>
    <preview-three-imgs ref="threeImgsDom"  :id="`three${teplModal.file_id}`" :fileId="teplModal.file_id" :templateBean="templateBean" :reportDataBean="reportDataBean"></preview-three-imgs>
    <preview-four-form :templateBean="templateBean" :reportDataBean="reportDataBean"></preview-four-form>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import oneTemplate from "./components/oneTemplate.vue";
import previewTowTable from "./components/previewTowTable.vue";
import previewThreeImgs from "./components/previewThreeImgs.vue";
import previewFourForm from "./components/previewFourForm.vue";
import html2canvas from "html2canvas";
import JsPDF from 'jspdf';
export default {
  name: 'canvasTemp',
  components: {
    oneTemplate,
    previewTowTable,
    previewThreeImgs,
    previewFourForm
  },
  data() {
    return {
      dialog: false,
      templateBean: {},
      reportDataBean: {},
      changeBeans: {},
      teplModal: {
        template_id: "",
        file_id: ""
      }
    }
  },
  methods: {
    ...mapActions(['getTemplateAllFieldAPI', "getviewFileReportDataAIP", "getFileReportFieldsAPI"]),
    //获取数据
    async getParmasData(obj) {
      this.teplModal = obj
      this.templateBean = await this.getFielBeanList()
      this.reportDataBean = await this.getFielBodyList()
      return this.reportDataBean
    },

    // 获取字段列表
    async getFielBeanList() {
      return await new Promise((resolve) => {
        this.getFileReportFieldsAPI({ template_id: this.teplModal.template_id, file_id: this.teplModal.file_id }).then(res => {
          let { data, msg, scode, status } = res;
          if (status === "ok") {
            resolve(data)
          } else {
            resolve([])
          }
        })
      })

    },
    //获取body数据
    async getFielBodyList() {
      this.dialog = true
      return await new Promise((resolve) => {
        this.getviewFileReportDataAIP(this.teplModal).then(res => {
          let { data, msg, scode, status } = res;
          this.dialog = false
          if (status === "ok") {
            resolve(data.reportDataBean)
          } else {
            resolve([])
          }
        })
      })

    },


    //导出报告
    onExport(flag) {
      const clientWidth = this.$refs.print.offsetWidth;
      const clientHeight = this.$refs.print.offsetHeight;
      const kh = [clientWidth, clientHeight];
      html2canvas(this.$refs.print, { useCORS: true, logging: true }).then((canvas) => {
        var pageData = canvas.toDataURL('image/jpeg', 1.0);
        if (flag) {
          var contentWidth = canvas.width;
          var contentHeight = canvas.height;
          var pageHeight = contentWidth / 592.28 * 841.89;
          var leftHeight = contentHeight;
          var position = 0;
          var imgWidth = 595.28;
          var imgHeight = 595.28 / contentWidth * contentHeight;
          var pdf = new JsPDF('', 'pt', 'a4');
          if (leftHeight < pageHeight) {
            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
          } else {    // 分页
            while (leftHeight > 0) {
              pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
              leftHeight -= pageHeight;
              position -= 841.89;
              //避免添加空白页
              if (leftHeight > 0) {
                pdf.addPage();
              }
            }
          }
          //可动态生成
          pdf.save('X射线探伤检测报告');
        } else {
          this.downloadPNG(pageData, kh);
        }
      });

    },
    //下载
    downloadPNG(imgUrl, kh) {
      this.getUrlBase64(imgUrl, kh).then((base64) => {
        const link = document.createElement('a');
        link.href = base64;
        link.download = `X射线探伤检测报告.png`;
        link.click();
      });
    },
    //设置
    getUrlBase64(url, kh) {
      return new Promise((resolve) => {
        let canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.crossOrigin = 'Anonymous'; // 允许跨域
        img.src = url;
        img.onload = () => {
          canvas.height = kh[1];
          canvas.width = kh[0];
          ctx.drawImage(img, 0, 0, kh[0], kh[1]);
          const dataURL = canvas.toDataURL('image/png');
          canvas = null;
          resolve(dataURL);
        };
      });
    }
  }

}
</script>

<style scoped lang='less'>
.pcbox {
  border: 1px solid rgba(207, 215, 229, 0.6);
  border-radius: 4px;
  // height: calc(100% - 102px);
  padding: 40px 68px;
  .line-box {
    margin-top: 80px;
    border: 1px solid rgba(207, 215, 229, 0.6);
    padding: 18px;
  }
}
</style>